<template>
  <div class="account-management">
    <div class="personal-info-container">
      <div class="personal-info-wrapper">
        <div class="user-wrapper">
          <div class="image-wrapper">
            <img src="">
          </div>
          <p class="username">用户名</p>
        </div>
        <div class="company-info">
          <p>公司名称：</p>
          <p>公司邮箱：</p>
          <p>公司地址：</p>
          <button>完善厂商信息</button>
        </div>
      </div>
      <div class="manager-container">
        <p class="title">您的客户经理</p>
        <div class="image-wrapper">
          <img src="">
        </div>
        <p class="manager-name">姓名</p>
        <p class="telephone">手机： 16666666666</p>
        <p class="email">yasinli.lyx@qq.com</p>
        <ul>
          <li>社交账号</li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div class="count-container">
      <div class="brand-wrapper">
        
      </div>
      <div class="product-wrapper">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AccountManagement',
  data () {
    return {

    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.account-management {
  display: flex;
  flex-direction: column;
}
.personal-info-container {
  display: flex;
  height: 5.6rem;
  .personal-info-wrapper {
    background: #fff;
    flex: 1;
    display: flex;
    align-items: center;
    .user-wrapper {
      width: 6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      .image-wrapper {
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .username {
        margin-top: .2rem;
        text-align: center;
        line-height: .56rem;
        font-size: .4rem;
      }
    }
    .company-info {
      flex: 1;
      p {
        line-height: .42rem;
        margin-bottom: .36rem;
      }
    }
  }
  .manager-container {
    box-sizing: border-box;
    padding: .4rem .6rem;
    background: #fff;
    width: 6.4rem;
    flex: none;
    margin-left: .4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      align-self: flex-start;
      font-weight: bolder;
    }
    .image-wrapper {
      width: .8rem;
      height: .8rem;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .manager-name {
      margin-top: .2rem;
      font-size: .28rem;
    }
    .telephone {
      margin-top: .5rem;
    }
    .email {
      margin-top: .3rem;
    }
    ul {
      margin-bottom: .2rem;
      flex: 1;
      display: flex;
      align-items: flex-end;
    }
  }
}
.count-container {
  margin-top: .4rem;
  height: 6.4rem;
  display: flex;
  &>div {
    background: #fff;
    box-sizing: border-box;
    padding: .5rem;
    flex: 1;
  }
  &>div:first-child {
    margin-right: .4rem;
  }
}
</style>